<template>
    <div id="app">
      <h3><router-link to="/BookAdd">添加</router-link></h3>
        <table border="1" align="center">
          <tr>
            <td>图书编号</td>
            <td>图书名称</td>
            <td>图书作者</td>
            <td>图书价格</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item ,index) in pi.list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.author}}</td>
            <td>{{item.price}}</td>
            <td><a @click.prevent="Gx(item.id)" href="#">编辑</a><button @click="deleteBook(item.id)">删除</button></td>
          </tr>
          <tr>
            <td colspan="5">
              <button v-if="pi.hasPreviousPage" @click="selectAll(pi.prePage,pi.pageSize)">上一页</button>
              <button v-if="pi.hasNextPage" @click="selectAll(pi.nextPage,pi.pageSize)">下一页</button>
            </td>
          </tr>
        </table>

    </div>
</template>

<script>
export default {
  name: "BookList",
    data(){
      return{
        pi:{}
      }
    },
//  使用钩子函数
    created() {
    //发ajax请求spring
      this.selectAll(1,3);
    },
    methods :{
      deleteBook(id){
        if(confirm("是否确认删除")) {
          this.axios.delete("/books/" + id).then((resp) => {
            alert(id);
            //调用查询方法
            this.selectAll(1,3);
          });
        }
      },
      selectAll(pageNum,pageSize){
        //发ajax请求spring
        this.axios.get("/books/"+pageNum+"/"+pageSize).then((resp)=>{
          this.pi=resp.data;
        });
      },
     Gx(id){
      this.$router.push({path:"Gx",query:{id:id}})
      }
    }
  }
</script>

<style scoped>

</style>
